How to Create Free Mockups for Designers

深入解析 Wireframe、Mockup 與 Prototype 的差異，了解設計流程中這三大關鍵工具的角色與應用，幫助設計師與開發團隊高效協作，創造出更具用戶體驗的產品設計。

常常我們在做產品或做創新時，會把初步的構想做出"原型"。 但其實在英文內，有更細部的劃分，將原型分成3種：Wireframe、Mockup與Prototype 這張圖

這篇文章將為大家簡單介紹一下 Wireframe、Mockup 到 Prototype 三者的差異，與完整的 UI 介面設計流程。

This guide will clearly define mockups and prototypes, explore why these terms often get jumbled, pinpoint the critical differences between mockup and prototype, and help you decide when to use each.

線框圖Wireframe、視覺稿Mockup、功能原型Prototype的差異是什麼？ 一般來說，商業分析師或產品經理會製作線框圖，UI/UX 產品設計師會製作視覺稿，而功能原型則需要系統分析師參與其中。

就一個網站新手企劃來說，線框圖 (Wireframe) 跟樣張 (Mockup)跟原型 (Prototype)總是讓人傻傻分不清楚 到底這三者有什麼不同呢？

在電子產品的設計與驗證上經常會聽到PM與機構工程師們談論所謂的「mockup」與「prototype」製作，到底「mockup (實物模型)」與「prototype (原型樣機)」這兩者在定義上有何分別？